<template>
  <d2-container>
    <el-form ref="form" :model="formAddHomestays" :rules="rules" label-width="120px">
      <el-form-item label="地址">
        <el-cascader
          v-model="formAddHomestays.address"
          placeholder = "请选择地区"
          :options = "options"
          :clearable = true
        >
        </el-cascader>
        
        <el-input
          type="text"
          placeholder="请输入详细地址"
          v-model="formAddHomestays.detailAddress"
          maxlength="30"
          show-word-limit
          style="width: 40%; margin-left:2%;"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="卫生许可证">
        <el-upload
          class="upload-demo"
          action="#"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="formAddHomestays.hygieneLicense">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
        </el-upload>
      </el-form-item>

      <el-form-item label="营业执照">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="formAddHomestays.hygieneLicense">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
        </el-upload>
      </el-form-item>

      <el-form-item label="餐饮服务许可证">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="formAddHomestays.hygieneLicense">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
        </el-upload>
      </el-form-item>

      <el-form-item label="消防检查合格意见书">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="formAddHomestays.hygieneLicense">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
        </el-upload>
      </el-form-item>

      <el-form-item label="特种行业许可证">
        <el-upload
          class="upload-demo"
          action="#"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :auto-upload="false"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="formAddHomestays.hygieneLicense"
          style="margin-right:20%;">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>
        </el-upload>
      </el-form-item>

  <el-form-item>
    <!-- <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button> -->
  </el-form-item>

</el-form>
  </d2-container>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
  data() {
    return {
      options: regionData,
      areaData: [],
      formAddHomestays:{
        address : '',
        detailAddress : '',
        hygieneLicense : []


      },
      rules: {}
    }
  },
  
  methods:{
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
  }


 
}
</script>

<style>

</style>